<template>
  <div class="payment_center_shop">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex"
          justify="start"
          class="search-item-left">
          <Col class="search-item">
            <span class="search-label">门店:</span>
            <Select v-model="shop"
              filterable
              @on-change="search">
              <Option v-for="item in shops"
                :value="item.shopId"
                :key="item.shopId">{{ item.shopName }}</Option>
            </Select>
          </Col>
          <Col class="search-item">
            <Button class="search-btn"
              type="primary"
              @click="search">查询</Button>
          </Col>
          <Col class="search-item">
            <Button class="search-btn"
              @click="reset">重置</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Drawer v-model="Dmodal"
      :title="drawerData[batchType].title"
      :mask-closable="true"
      class="shopDrawer"
      :width="drawerData[batchType].width">
      <template v-if="drawerData[batchType].tableColumns">
        <div class="search-box">
          <Row type="flex">
            <Row type="flex"
              justify="start"
              class="search-item-left">
              <Col class="search-item">
                <span class="search-label">商户名称:</span>
                <Input placeholder="请输入"
                  v-model="drawMerchantName"
                  @on-keyup="filterSpace"></Input>
              </Col>
              <Col class="search-item">
                <Button class="search-btn"
                  type="primary"
                  @click="drawSearch">查询</Button>
              </Col>
              <Col class="search-item">
                <Button class="search-btn"
                  @click="drawReset">重置</Button>
              </Col>
            </Row>
          </Row>
        </div>
        <Table stripe
          class="table-list drawTable"
          :max-height="drawTableHeight"
          :columns="drawerData[batchType].tableColumns"
          :data="drawData">
          <template slot-scope="{ row, index }" slot="radio">
            <Radio v-model="row.$checked" @on-change="radioChange(...arguments, index)"></Radio>
          </template>
        </Table>
        <Row type="flex">
          <Col span="24">
            <div class="page-box">
              <Page :total="drawTotal"
                :page-size="drawPageSize"
                :current="drawPageIndex"
                show-total
                show-sizer
                @on-change="changeDrawPageIndex"
                @on-page-size-change="changeDrawPageSize"/>
            </div>
          </Col>
        </Row>
        <Row type="flex"
          justify="end"
          class="bottom-form-item"
          style="width: 100%; padding: 20px 30px; border-top: 1px solid #e8eaec; position: absolute; right: 0; bottom: 0;">
          <Col>
            <Button style="width: 80px"
              @click="Dmodal = false">取消</Button>
            <Button type='primary'
              style="margin-left: 20px; width: 80px"
              @click="ensureTie">确定</Button>
          </Col>
        </Row>
      </template>
      <template v-else>
        <CheckboxGroup style="margin: 20px 0 0 70px"
          v-model="passagewayDetails">
          <Checkbox style="display: block; margin-bottom: 10px"
            v-for="passageway in drawPassageways"
            :key="passageway"
            :label="passageway"
            disabled>
          </Checkbox>
        </CheckboxGroup>
      </template>
    </Drawer>
    <Table stripe
      :height="this.tableHeight"
      ref="selection"
      class="table-list"
      :loading="loading"
      :columns="columns"
      @on-selection-change="selectionChange"
      :data="data">
      <template slot-scope="{ row, index }"
        slot="payway">
        <i class="iconsys icondetail"
          title="查看详情"
          @click="tie(row, 'passageway')">
        </i>
      </template>
      <template slot-scope="{ row, index }"
        slot="paywaySetting">
        <i class="iconsys iconxiaofeijine"
          title="支付方式展示"
          @click="configPayment(row)">
        </i>
      </template>
      <template slot-scope="{ row, index }"
        slot="wechat">
        <Poptip confirm transfer
          v-if="row.wexinAccountId && hasPermission(['moms:pay:shopaccountunbind'])"
          title="你确定要解绑吗？"
          @on-ok="ok(row, 'wechat')"
          style="text-align: left">
          <i class="iconsys iconjiebang"
            title="解绑"></i>
        </Poptip>
        <i class="iconsys iconbangding"
          v-else-if="!row.wexinAccountId && hasPermission(['moms:pay:shopaccountbind'])"
          title="绑定"
          @click="tie(row, 'wechat')"></i>
      </template>
      <template slot-scope="{ row, index }"
        slot="alipay">
        <Poptip confirm transfer
          v-if="row.alipayAccountId && hasPermission(['moms:pay:shopaccountunbind'])"
          title="你确定要解绑吗？"
          @on-ok="ok(row, 'alipay')"
          style="text-align: left">
          <i class="iconsys iconjiebang"
            title="解绑"></i>
        </Poptip>
        <i class="iconsys iconbangding"
          v-else-if="!row.alipayAccountId && hasPermission(['moms:pay:shopaccountbind'])"
          title="绑定"
          @click="tie(row, 'alipay')"></i>
      </template>
      <template slot-scope="{ row, index }"
        slot="merchants">
        <Poptip confirm transfer
          v-if="row.cmbAccountId && hasPermission(['moms:pay:shopaccountunbind'])"
          title="你确定要解绑吗？"
          @on-ok="ok(row, 'merchants')"
          style="text-align: left">
          <i class="iconsys iconjiebang"
            title="解绑"></i>
        </Poptip>
        <i class="iconsys iconbangding"
          v-else-if="!row.cmbAccountId && hasPermission(['moms:pay:shopaccountbind'])"
          title="绑定"
          @click="tie(row, 'merchants')"></i>
      </template>
      <template slot-scope="{ row, index }"
        slot="action">
        <i class="iconsys iconedit"
          title="修改支付通道"
          @click="changePayWay(row)"></i>
      </template>
    </Table>
    <Row type="flex">
      <Col span="12"
        class="module-menu-nav">
        <Button class="module-menu-margin"
          @click="handleSelectAll">{{ btnTitle }}</Button>
        <Dropdown placement="top"
          trigger="click"
          v-if="hasPermission(['moms:pay:shopaccountunbind', 'moms:pay:shopaccountchannelupdate', 'moms:pay:shopaccountbind'])"
          @on-click="batch">
          <Button class="btn">批量操作</Button>
          <DropdownMenu slot="list"
            style="text-align:center">
            <DropdownItem name="1" v-if="hasPermission(['moms:pay:shopaccountunbind'])">批量解绑</DropdownItem>
            <DropdownItem name="2" v-if="hasPermission(['moms:pay:shopaccountbind'])">批量绑定</DropdownItem>
            <DropdownItem name="3" v-if="hasPermission(['moms:pay:shopaccountchannelupdate'])">批量修改支付通道</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </Col>
      <Col span="12">
        <div class="page-box">
          <Page :total="total"
            :page-size="pageSize"
            :current="pageIndex"
            show-total
            show-sizer
            @on-change="changePageIndex"
            @on-page-size-change="changePageSize"/>
        </div>
      </Col>
    </Row>
    <Modal
      v-model="radioModal"
      width="400"
      :title="'选择' + radioModalTitle + '类型'"
      @on-ok="selectType">
      <RadioGroup v-model="batchType" vertical>
        <Radio label="wechat">
          {{ radioModalTitle }}微信收款账号
        </Radio>
        <Radio label="alipay">
          {{ radioModalTitle }}支付宝收款账号
        </Radio>
        <Radio label="merchants">
          {{ radioModalTitle }}聚合收款账号
        </Radio>
      </RadioGroup>
    </Modal>
    <Modal
      v-model="checkboxModal"
      width="300"
      title="支付通道"
      @on-ok="selectPassageway">
      <half-transfer @on-change="transferChange"
        :data="formatDrawPassageways"
        :show="checkboxModal"></half-transfer>
    </Modal>
    <Drawer v-model="payDrawerShow"
      title="支付方式显示配置"
      :mask-closable="true"
      class="shopDrawer"
      width="840">
      <Table stripe
        class="table-list"
        :max-height="payDrawerTableHeight"
        :columns="payDrawerColumns"
        :data="payDrawerData">
        <template slot-scope="{ row, index }" slot="weixin">
          <p v-if="row.channelOptionDTOList[0].status === 2">--</p>
          <cancel-radio v-else title="显示" :checked="row.channelOptionDTOList[0].status === 0" @on-change="cancelRadioChange(...arguments, row, 0, index)"/>
        </template>
        <template slot-scope="{ row, index }" slot="alipay">
          <p v-if="row.channelOptionDTOList[1].status === 2">--</p>
          <cancel-radio v-else title="显示" :checked="row.channelOptionDTOList[1].status === 0" @on-change="cancelRadioChange(...arguments, row, 1, index)"/>
        </template>
        <template slot-scope="{ row, index }" slot="pos">
          <p v-if="row.channelOptionDTOList[2].status === 2">--</p>
          <cancel-radio v-else title="显示" :checked="row.channelOptionDTOList[2].status === 0" @on-change="cancelRadioChange(...arguments, row, 2, index)"/>
        </template>
        <template slot-scope="{ row, index }" slot="cash">
          <p v-if="row.channelOptionDTOList[3].status === 2">--</p>
          <cancel-radio v-else title="显示" :checked="row.channelOptionDTOList[3].status === 0" @on-change="cancelRadioChange(...arguments, row, 3, index)"/>
        </template>
        <template slot-scope="{ row, index }" slot="transfer">
          <p v-if="row.channelOptionDTOList[4].status === 2">--</p>
          <cancel-radio v-else title="显示" :checked="row.channelOptionDTOList[4].status === 0" @on-change="cancelRadioChange(...arguments, row, 4, index)"/>
        </template>
        <template slot-scope="{ row, index }" slot="oldCash">
          <p v-if="row.channelOptionDTOList[5].status === 2">--</p>
          <cancel-radio v-else title="显示" :checked="row.channelOptionDTOList[5].status === 0" @on-change="cancelRadioChange(...arguments, row, 5, index)"/>
        </template>
      </Table>
      <Row type="flex"
        justify="end"
        class="bottom-form-item"
        style="width: 100%; padding: 20px 30px; border-top: 1px solid #e8eaec; position: absolute; right: 0; bottom: 0;">
        <Col>
          <Button style="width: 80px"
            @click="payDrawerShow = false">取消</Button>
          <Button type='primary'
            style="margin-left: 20px; width: 80px" @click="ensureConfig">确定</Button>
        </Col>
      </Row>
    </Drawer>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getShopSelects, getShopLists, bindAccount, unbindAccount, bindPassageVerify, bindPassage, getDetails, getPaymentConfig, savePaymentConfig } from '@/api/pay/shop.js'
import { getAccountLists } from '@/api/pay/account.js'
import halfTransfer from '@/view/components/half-transfer/index.vue'
import cancelRadio from '@/components/cancel-radio/index.vue'
const commonColumns = [
  {
    title: ' ',
    slot: 'radio',
    width: 40
  },
  {
    title: '名称',
    key: 'accountName',
    width: 120
  },
  {
    title: '商户名称',
    key: 'merchantName',
    width: 120
  },
  {
    title: '开户行名称',
    key: 'settlementBank',
    width: 120
  },
  {
    title: '银行卡号',
    key: 'cardNo',
    minWidth: 120
  }
]
export default {
  name: 'payment_shop_list',
  components: {
    halfTransfer,
    cancelRadio
  },
  data () {
    return {
      tableHeight: 0,
      btnTitle: '全选',
      shop: '-1',
      shops: [{ shopName: '全部', shopId: '-1' }],
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          fixed: 'left',
          align: 'center'
        },
        {
          title: '门店名称',
          key: 'shopName',
          fixed: 'left',
          minWidth: 150
        },
        {
          title: '门店编码',
          key: 'shopCode',
          width: 150
        },
        {
          title: '微信收款账号',
          key: 'wexinAccountName',
          minWidth: 150
        },
        {
          title: '支付宝收款账号',
          key: 'alipayAccountName',
          minWidth: 150
        },
        {
          title: '聚合收款账号',
          key: 'cmbAccountName',
          minWidth: 150
        },
        {
          title: '修改时间',
          key: 'updatedAt',
          width: 150
        },
        {
          title: '创建时间',
          key: 'createdAt',
          width: 150
        },
        {
          title: '支付通道',
          slot: 'payway',
          fixed: 'right',
          align: 'center',
          width: 90
        }
      ],
      Dmodal: false,
      selectLists: [],
      drawerData: {
        wechat: {
          title: '绑定微信账号',
          width: '600',
          tableColumns: [...commonColumns]
        },
        alipay: {
          title: '绑定支付宝账号',
          width: '600',
          tableColumns: [...commonColumns]
        },
        merchants: {
          title: '绑定聚合账号',
          width: '600',
          tableColumns: [...commonColumns]
        },
        passageway: {
          title: '支付通道',
          width: '400',
          enmus: []
        }
      },
      drawPassageways: [],
      passagewayDetails: [],
      formatDrawPassageways: [],
      passagewaySelections: [],
      paymentShopAccountId: [],
      batchOperate: '1', // '1'批量解绑, '2'批量绑定, '3'批量修改支付通道
      batchType: 'wechat', // 'wechat', 'alipay', 'merchants', 'passageway'
      enums: {
        wechat: 'weixin',
        alipay: 'alipay',
        merchants: 'cmb'
      },
      drawMerchantName: '',
      drawTotal: 0,
      drawPageIndex: 1,
      drawPageSize: 10,
      drawLoading: true,
      drawData: [],
      drawTableHeight: 200,
      radioModal: false,
      checkboxModal: false,
      payDrawerShow: false,
      payDrawerData: [],
      payDrawerColumns: [
        {
          title: '支付场景',
          key: 'scopeName',
          width: 150
        },
        {
          title: '微信',
          slot: 'weixin',
          minWidth: 100
        },
        {
          title: '支付宝',
          slot: 'alipay',
          minWidth: 120
        },
        {
          title: 'POS刷卡',
          slot: 'pos',
          minWidth: 100
        },
        {
          title: '现金',
          slot: 'cash',
          minWidth: 100
        },
        {
          title: '对公转账',
          slot: 'transfer',
          minWidth: 100
        },
        {
          title: '老POS刷卡',
          slot: 'oldCash',
          minWidth: 120
        }
      ],
      payDrawerTableHeight: 200
    }
  },
  mounted () {
    this.getShops()
    this.getData()
    this.calcDrawTableHeight()
    window.addEventListener('resize', this.calcDrawTableHeight)
    if (this.hasPermission(['moms:pay:shopaccountunbind', 'moms:pay:shopaccountbind'])) {
      this.columns = this.columns.concat(
        [{
          title: '微信收款',
          slot: 'wechat',
          fixed: 'right',
          align: 'center',
          width: 90
        },
        {
          title: '支付宝收款',
          slot: 'alipay',
          fixed: 'right',
          align: 'center',
          width: 100
        },
        {
          title: '聚合收款',
          slot: 'merchants',
          fixed: 'right',
          align: 'center',
          width: 90
        }]
      )
    }
    if (this.hasPermission(['moms:pay:shopaccountchannelupdate'])) {
      this.columns.push({
        title: '操作',
        slot: 'action',
        fixed: 'right',
        width: 60
      })
    }
    if (this.hasPermission(['moms:pay:shopaccountoptionupdate'])) {
      this.columns.push({
        title: '支付方式展示',
        slot: 'paywaySetting',
        fixed: 'right',
        align: 'center',
        width: 110
      })
    }
  },
  watch: {
    '$route' (newRoute) {
      const poptips = document.querySelectorAll('body .ivu-poptip-popper.ivu-poptip-confirm.v-transfer-dom')
      poptips.forEach(poptip => {
        if (poptip.style.display !== 'none') poptip.style.display = 'none'
      })
      if (newRoute.name === 'payment_shop_list') {
        this.search()
      }
    },
    selectLists (val) {
      if (val.length === this.data.length) {
        this.btnTitle = '取消全选'
      } else {
        this.btnTitle = '全选'
      }
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    }),
    radioModalTitle () {
      return this.batchOperate === '1' ? '解绑' : '绑定'
    }
  },
  methods: {
    filterSpace () {
      this.drawMerchantName = this.drawMerchantName.replace(/\s+/g, '')
    },
    getShops () {
      getShopSelects({
        merchantId: this.merchantId
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.shops = this.shops.concat(result.data || [])
        }
      })
    },
    search () {
      this.pageIndex = 1
      this.getData()
    },
    reset () {
      this.shop = '-1'
      this.search()
    },
    changePageIndex (page) {
      this.pageIndex = page
      this.getData()
    },
    changePageSize (size) {
      this.pageSize = size
      this.search()
    },
    ok (row, whichType) {
      this.batchType = whichType
      this.paymentShopAccountId = [row.paymentShopAccountId]
      this.shopId = [row.shopId]
      this.unbindAccount()
    },
    configPayment (row) {
      this.configPaymentId = row.shopId
      this.payDrawerData = []
      getPaymentConfig({
        shopId: row.shopId,
        merchantId: this.merchantId
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.payDrawerShow = true
          this.payDrawerData = result.data
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    cancelRadioChange (isChecked, row, index, rowIdx) {
      const item = { ...row.channelOptionDTOList[index] }
      item.status = isChecked ? 0 : 1
      row.channelOptionDTOList[index] = item
      this.payDrawerData[rowIdx] = { ...row }
    },
    ensureConfig () {
      savePaymentConfig({
        shopId: this.configPaymentId,
        merchantId: this.merchantId,
        config: JSON.stringify(this.payDrawerData)
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.payDrawerShow = false
          this.$Message.success('配置成功')
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    unbindAccount () {
      unbindAccount({
        shopIdList: this.shopId,
        shopAccountIdList: this.paymentShopAccountId,
        accountType: this.enums[this.batchType],
        merchantId: this.merchantId
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.$Message.success('解绑成功')
          this.getData()
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    handleSelectAll () {
      this.$refs.selection.selectAll(this.selectLists.length !== this.data.length)
    },
    selectionChange (selections) {
      this.selectLists = selections
    },
    getData () {
      const params = {
        shopId: this.shop === '-1' ? '' : this.shop,
        merchantId: this.merchantId,
        offset: (this.pageIndex - 1) * this.pageSize,
        limit: this.pageSize
      }
      this.loading = true
      this.tableHeight = 0
      getShopLists(params).then(res => {
        this.loading = false
        const result = res.data || {}
        this.selectLists = []
        if (result.status === 200) {
          this.data = result.data || []
          this.total = result.totalCount || 0
          if (this.data.length > 10) {
            this.tableHeight = 520
          }
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
        this.loading = false
      })
    },
    tie (row, whichType) {
      this.batchType = whichType
      this.paymentShopAccountId = [row.paymentShopAccountId]
      this.shopId = [row.shopId]
      this.drawMerchantName = ''
      this.drawCheckedId = ''
      this.drawPageIndex = 1
      if (this.enums[whichType]) {
        this.drawGetData()
      } else {
        this.getPassagewayDetail().then(() => {
          this.Dmodal = true
        })
      }
    },
    getPassagewayDetail () {
      return new Promise(resolve => {
        getDetails({
          shopIdList: this.shopId,
          merchantId: this.merchantId
        }).then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            const data = result.data || []
            this.formatDrawPassageways = data.map(item => ({
              label: item.channelName,
              value: item.channelId,
              checked: !item.shopChannelStatus,
              disabled: !!item.channelStatus
            }))
            this.drawPassageways = data.map(item => item.channelName)
            let passagewayDetails = []
            data.forEach(item => {
              if (!item.shopChannelStatus) {
                passagewayDetails.push(item.channelName)
              }
            })
            this.passagewayDetails = passagewayDetails
            resolve(true)
          } else {
            this.$Message.error(`${result.error}`)
          }
        }).catch(err => {
          this.$Message.error(`${err}`)
        })
      })
    },
    ensureTie () {
      if (this.drawCheckedId) {
        bindAccount({
          shopIdList: this.shopId,
          shopAccountIdList: this.paymentShopAccountId,
          accountId: this.drawCheckedId,
          accountType: this.enums[this.batchType],
          merchantId: this.merchantId
        }).then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            this.Dmodal = false
            this.$Message.success('绑定成功')
            this.getData()
          } else {
            this.$Message.error(`${result.error}`)
          }
        }).catch(err => {
          this.$Message.error(`${err}`)
        })
      } else {
        this.$Message.error('请选择绑定数据')
      }
    },
    radioChange (val, index) {
      if (val) {
        this.drawData = this.drawData.map(item => {
          item.$checked = false
          return item
        })
        this.drawData[index].$checked = val
        this.drawCheckedId = this.drawData[index].paymentAccountId
      }
    },
    drawSearch () {
      this.drawPageIndex = 1
      this.drawGetData()
    },
    drawReset () {
      this.drawMerchantName = ''
      this.drawSearch()
    },
    changeDrawPageIndex (page) {
      this.drawPageIndex = page
      this.drawGetData()
    },
    changeDrawPageSize (size) {
      this.drawPageSize = size
      this.drawSearch()
    },
    drawGetData () {
      this.drawLoading = true
      getAccountLists({
        merchantName: this.drawMerchantName,
        providerCode: this.enums[this.batchType],
        offset: (this.drawPageIndex - 1) * this.drawPageSize,
        limit: this.drawPageSize,
        merchantId: this.merchantId,
        hasChildren: false,
        deleted: 0
      }).then(res => {
        this.drawLoading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.Dmodal = true
          this.drawData = result.data || []
          this.drawData = this.drawData.map(item => {
            return {
              ...item,
              $checked: item.paymentAccountId === this.drawCheckedId
            }
          })
          this.drawTotal = result.totalCount || 0
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
        this.drawLoading = false
      })
    },
    changePayWay (row) {
      this.paymentShopAccountId = [row.paymentShopAccountId]
      this.shopId = [row.shopId]
      this.getPassagewayDetail().then(() => {
        this.checkboxModal = true
      })
    },
    batch (val) {
      if (this.selectLists.length) {
        this.batchOperate = val
        if (val === '1' || val === '2') {
          this.batchType = 'wechat'
          this.radioModal = true
        } else {
          this.batchPassageVerify().then(() => {
            this.paymentShopAccountId = this.selectLists.map(item => item.paymentShopAccountId)
            this.shopId = this.selectLists.map(item => item.shopId)
            this.getPassagewayDetail().then(() => {
              this.checkboxModal = true
            })
          })
        }
      } else {
        this.$Message.error('至少选择一项数据')
      }
    },
    batchPassageVerify () {
      return new Promise(resolve => {
        bindPassageVerify({
          shopIdList: this.selectLists.map(item => item.shopId),
          merchantId: this.merchantId
        }).then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            resolve(true)
          } else {
            this.$Message.error(`${result.error}`)
          }
        }).catch(err => {
          this.$Message.error(`${err}`)
        })
      })
    },
    selectTypeVerify () {
      return new Promise(resolve => {
        const maps = {
          wechat: 'wexinAccountId',
          alipay: 'alipayAccountId',
          merchants: 'cmbAccountId'
        }
        const result = this.selectLists.filter(item => !!item[maps[this.batchType]])
        if (this.batchOperate === '1') {
          resolve(result.length === this.selectLists.length)
        } else {
          resolve(!result.length)
        }
      })
    },
    selectType () {
      this.selectTypeVerify().then(veriResult => {
        if (veriResult) {
          this.paymentShopAccountId = this.selectLists.map(item => item.paymentShopAccountId)
          this.shopId = this.selectLists.map(item => item.shopId)
          if (this.batchOperate === '1') {
            this.unbindAccount()
          } else {
            this.drawGetData()
            setTimeout(() => {
              this.Dmodal = true
              document.body.style.overflow = 'hidden'
            }, 500)
          }
        } else {
          this.$Message.error('选择数据状态不一致，请重新选择!')
        }
      })
    },
    selectPassageway () {
      bindPassage({
        shopIdList: this.shopId,
        channelIdList: this.passagewaySelections.map(item => item.value),
        merchantId: this.merchantId
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.$Message.success('通道绑定成功')
          this.getData()
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    transferChange (selections) {
      this.passagewaySelections = selections
    },
    calcDrawTableHeight () {
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      this.drawTableHeight = clientHeight - 300
      this.payDrawerTableHeight = clientHeight - 156
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.calcDrawTableHeight)
  }
}
</script>

<style lang="less">
.payment_center_shop {
  .search-box {
    .search-item-left {
      width: 70%;
    }
    .search-item-right {
      width: 30%;
    }
  }
  .module-menu-nav {
    .btn {
      margin-right: 20px
    }
  }
  .btn-text {
    color: #348eed;
    cursor: pointer;
  }
  .ivu-table-tip {
    span {
      position: absolute;
      width: 100px;
      left: 50%;
      margin-left: -50px;
    }
  }
}
.drawTable.ivu-table-wrapper {
  overflow: hidden !important;
}
</style>
